:root {
  color: var(--font-color);
  --background-color: rgb(248, 249, 250);
  --font-color: #ffffff;
  --font-color-primary: #1b1b1b;
  --font-color-secondary: #696969;
  --link-color: #0085f2;
  --secondary-font-color: #6b7280;
  --background-primary: #fff;
  --background-secondary: #f9f9fb;
  --background-tertiary: #fff;
  --background-toc-active: #ebeaea;
  --background-mark-yellow: rgba(199, 183, 0, 0.4);
  --background-mark-green: rgba(0, 208, 97, 0.4);
  --background-information: rgba(0, 133, 242, 0.1);
  --background-warning: rgba(255, 42, 81, 0.1);
  --background-critical: rgba(211, 0, 56, 0.1);
  --background-success: rgba(0, 121, 54, 0.1);
  --border-primary: #cdcdcd;
  --border-secondary: #cdcdcd;
  --button-primary-default: #1b1b1b;
  --button-primary-text: #ffffff;
  --button-primary-hover: #696969;
  --button-primary-active: #9e9e9e;
  --button-primary-inactive: #1b1b1b;
  --button-secondary-default: #fff;
  --button-secondary-hover: #cdcdcd;
  --button-secondary-active: #cdcdcd;
  --button-secondary-inactive: #f9f9fb;
  --button-secondary-border-focus: #0085f2;
  --button-secondary-border-red: #ff97a0;
  --button-secondary-border-red-focus: #ffd9dc;
  --card-border-color: #f3f4f6;
  --card-background: var(--background-primary);
}

@media (prefers-color-scheme: light) {
  :root {
    --background-color: rgb(248, 249, 250);
    --font-color: #000000;
    --font-color-primary: #1b1b1b;
    --secondary-font-color: #6b7280;
    --background-primary: #fff;
    --background-secondary: #f9f9fb;
    --background-tertiary: #fff;
    --background-toc-active: #ebeaea;
    --background-mark-yellow: rgba(199, 183, 0, 0.4);
    --background-mark-green: rgba(0, 208, 97, 0.4);
    --background-information: rgba(0, 133, 242, 0.1);
    --background-warning: rgba(255, 42, 81, 0.1);
    --background-critical: rgba(211, 0, 56, 0.1);
    --background-success: rgba(0, 121, 54, 0.1);
    --border-primary: #cdcdcd;
    --border-secondary: #cdcdcd;
    --button-primary-default: #1b1b1b;
    --button-primary-text: #ffffff;
    --button-primary-hover: #696969;
    --button-primary-active: #9e9e9e;
    --button-primary-inactive: #1b1b1b;
    --button-secondary-default: #fff;
    --button-secondary-hover: #cdcdcd;
    --button-secondary-active: #cdcdcd;
    --button-secondary-inactive: #f9f9fb;
    --button-secondary-border-focus: #0085f2;
    --button-secondary-border-red: #ff97a0;
    --button-secondary-border-red-focus: #ffd9dc;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: rgb(20, 18, 24);
    --font-color: #ffffff;
    --font-color-primary: #ffffff;
    --font-color-secondary: #cdcdcd;
    --link-color: #3399ff;
    --card-border-color: #343434;
    --card-background: var(--background-primary);
    --secondary-font-color: #6b7280;
    --background-primary: #1b1b1b;
    --background-secondary: #343434;
    --background-tertiary: #4e4e4e;
    --background-toc-active: #343434;
    --background-mark-yellow: rgba(199, 183, 0, 0.4);
    --border-primary: #858585;
    --border-secondary: #696969;
    --button-primary-default: #fff;
    --button-primary-text: #ffffff;
    --button-primary-hover: #cdcdcd;
    --button-primary-active: #9e9e9e;
    --button-primary-inactive: #fff;
    --button-secondary-default: #4e4e4e;
    --button-secondary-hover: #858585;
    --button-secondary-active: #9e9e9e;
    --button-secondary-inactive: #4e4e4e;
    --link-color: #3b9eff;
  }
}

/* used for things that should be hidden in the ui,
but useful for people who use screen readers */

@charset 'utf-8';

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font:
    14px 'Helvetica Neue',
    Helvetica,
    Arial,
    sans-serif;
  line-height: 1.4em;
  min-width: 230px;
  margin: 0 auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 300;
}

flutter-cupertino-button[variant='filled']:not([disabled]) {
  color: var(--button-primary-text);
}
